<template>
  <!--规格选择-->
  <transition name="slideup" >
    <div class="pop-win"  v-if="isShowCoupon">
      <div class="get-coupon-wrap">
        <div class="c-t rel"><img src="./images/close-icon.svg" class="close" @click="hide">可领取的优惠券</div>
        <ul class="c-list">
          <!--<li v-for="item in couponList">-->
          <li >
            <div class="get-c-l">
              <span class="left-tip">新人-白酒券</span>
              <div class="coupon-c">
                <span class="coupon-money">
                  <b>¥</b>29
                  </span>
                <span class="coupon-desc">
                  <b class="f2 fz16">满109元减29</b>
                  <b class="f7 fz12 mt2">每个ID每天可领取6张 </b>
                </span>
              </div>
              <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
            </div>
            <div class="get-c-r">
              <span >立即领取</span>
            </div>
          </li> <li >
            <div class="get-c-l">
              <span class="left-tip">新人-白酒券</span>
              <div class="coupon-c">
                <span class="coupon-money">
                  <b>¥</b>29
                  </span>
                <span class="coupon-desc">
                  <b class="f2 fz16">满109元减29</b>
                  <b class="f7 fz12 mt2">每个ID每天可领取6张 </b>
                </span>
              </div>
              <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
            </div>
            <div class="get-c-r">
              <span >立即领取</span>
            </div>
          </li><li >
            <div class="get-c-l">
              <span class="left-tip">新人-白酒券</span>
              <div class="coupon-c">
                <span class="coupon-money">
                  <b>¥</b>29
                  </span>
                <span class="coupon-desc">
                  <b class="f2 fz16">满109元减29</b>
                  <b class="f7 fz12 mt2">每个ID每天可领取6张 </b>
                </span>
              </div>
              <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
            </div>
            <div class="get-c-r">
              <span >立即领取</span>
            </div>
          </li><li >
            <div class="get-c-l">
              <span class="left-tip">新人-白酒券</span>
              <div class="coupon-c">
                <span class="coupon-money">
                  <b>¥</b>29
                  </span>
                <span class="coupon-desc">
                  <b class="f2 fz16">满109元减29</b>
                  <b class="f7 fz12 mt2">每个ID每天可领取6张 </b>
                </span>
              </div>
              <p class="coupon-time">使用时间：2018/04/22-2018/05/22</p>
            </div>
            <div class="get-c-r">
              <span >立即领取</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>

</template>

<script>
  import getuser from '@/util/getuser'
  import config from '@/config/config'
  import {formatDate} from '@/util/util.js';
  export default {
    components: {

    },
    props: ['isShowCoupon'],
    data(){
      return {
        couponList:[],
//        userId:getuser().userId
      };
    },
   watch: {
//        sId: function (newVal) {
//            console.log(newVal);
//          this.getData(newVal)
//        }
    },
    methods: {
      hide(){
        this.$parent.closeCouponWrap()
      },
//      getData(id){
//        this.couponList=[];
////        var loadindex = layer.open({type: 2,shadeClose:false});
//        this.$http.post(config.baseUrl + '/cart/couponList', {
//          'storeId':id
//        }, {
//          headers: {},
//          credientials: true,
//          emulateJSON: true
//        }).then(function (response) {
////          layer.close(loadindex)
//          if (response.data.code == 200) {
//            this.couponList=response.data.list
//
//          } else {
//            layer.open({
//              content: data.msg,
//              btn: ['知道了'],
//            })
//          }
//        });
//      },
      get(item){
          if(!this.userId){
            layer.open({
              content:'请先登录',
              btn: ['知道了'],
            })
            return ;
          }
          var vm = this
        var loadindex = layer.open({type: 2,shadeClose:false});
        this.$http.post(config.baseUrl + '/cart/getCoupon', {
          'userId': this.userId,
          'couponId':item.couponId
        }, {
          headers: {},
          credientials: true,
          emulateJSON: true
        }).then(function (response) {
          layer.close(loadindex)
          if (response.data.code == 200) {
            layer.open({
              content: '优惠券领取成功'
              ,skin: 'msg'
              ,time: 2 //2秒后自动关闭
            });
            this.$parent.isShowCoupon = false
          } else {

            layer.open({
              content: response.data.msg
              ,skin: 'msg'
              ,time: 2 //2秒后自动关闭
            });
            vm.$parent.closeCouponWrap()
          }
        });
      }
    },
    filters: {
      formatDate(time) {
        if(time){
          var date = new Date(time * 1000);
          return formatDate(date);
        }
      },
    },
  }
</script>


<style scoped>
  .slideup-enter-active, .slideup-leave-active{
    transition:all .3s
  }
  .slideup-enter, .slideup-leave-to{
    transform:translateY(100%);
    opacity:0;
  }
  .close{
    position:absolute;
    right:1rem;
    top:.8rem;
  }
  .pop-win{
    width:100%;
    height:calc(100% - 2.5rem);
    position:absolute;
    left:0;
    bottom:0;
    z-index:100;
    background-color:rgba(0, 0, 0, .4);
    transition:all .4s;
  }
  .get-coupon-wrap{
    background: #F8F8F8;
    width:100%;
    height:55%;
    position:absolute;
    left:0;
    bottom:0;
  }
  .c-t{
    font-size:.8rem;
    color:#222222;
    padding:.8rem;
  }
  .c-list{
    height:calc(100% - 2.5rem);
    overflow-x:hidden;
    overflow-y:auto;
    /*margin:0 .75rem;*/
  }
  .c-list li{
    width:92%;
    height:6rem;
    margin:.75rem auto ;
    /*padding:.2rem .7rem;*/
    overflow:hidden;
    display:table;
    background: #fff;
    /*box-shadow:0px 0px 12px  rgba(0,0,0,.2);*/
    box-shadow: 0 2px 4px 0 rgba(221,221,221,0.50);
    border-radius: 6px;

  }
  .get-c-l{
    display:table-cell;
    width:72%;
    text-align:left;
    font-size:.7rem;
    position:relative;
  }
  .get-c-r{
    display:table-cell;
    width:28%;
    text-align:center;
    vertical-align:middle;
    background-color:#EE5C5C;
    position:relative;
    border-left:1px dashed #fff;
  }
  .get-c-r span{
    display:inline-block;
    border-radius:1rem;
    padding:.2rem .5rem;
    font-size:.65rem;
    color: #EE5C5C;
    line-height:1;
    background: #fff;
  }
.get-c-r:before{
    content:'';
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#f1f1f1;
    position:absolute;
    top:-6px;
    left:-6px;
    z-index:2;

  }
  .get-c-r:after{
    content:'';
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#f1f1f1;
    position:absolute;
    bottom:-6px;
    left:-6px;
    z-index:2;
  }
  .get-c-l p{
    margin-bottom:.2rem;
  }
  .fz20{ font-size:1rem; }
  .fz12{ font-size:.6rem; }
  .fz16{ font-size:.8rem; }
  .red{
    color:#e80013;
  }
  .f2{
    color:#222;
  }
  .f6{ color:#666; }
  .f7{ color:#777; }
  .btn-finish{
    width:100%;
    height:2.5rem;
    line-height:2.5rem;
    background:#e80013;
    font-size:.8rem;
    color:#ffffff;
    position:absolute;
    left:0;
    bottom:0;
  }
  .left-tip{
    position:absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    color: #FFFFFF;
    background: #FF9898;
    border-radius: 6px 0 100px 0;
    display:inline-block;
    padding:.2rem .7rem .2rem .5rem;
  }
  .coupon-c{
    padding:1.7rem .5rem .5rem;
    overflow:hidden;
  }
  .coupon-money{
    font-size: 2rem;
    color: #E93B3D;
    float:left;
  }
  .coupon-money b{
    font-size:.5rem;
    margin-right:.2rem;
  }
  .coupon-desc{
    float:left;
    padding-top:.3rem;
    padding-left:.5rem;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
  }
  .coupon-desc b{
    display:block;
    font-weight:normal;
    /*line-height:1.6;*/
  }
  .coupon-time{
    padding-left:.5rem;
    font-size:.5rem;
    color: #777777;
  }
  .mt2{ margin-top:.1rem;}
</style>
